<template>
  <div class="logo-wrapper" @click="goSysIndex">
    <!-- <img v-if="showLogo":src="require('../../assets/work_logo.png')" /> -->
    <!-- <img src="@/assets/logo.png" class="logo-img" alt="" srcset="" /> -->

    <div class="logo-img">
      <img v-if="settingFields.logoUrl" :src="`${uploadURL}${PathPrefix}${settingFields.logoUrl}`" />
    </div>
    <transition v-if="showTitle" name="el-fade-in-linear">
      <h1 class="logo-title">{{ settingFields.sysName }}</h1>
    </transition>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Logo',
  props: {
    showTitle: {
      type: Boolean,
      default: true,
    },
    showLogo: {
      type: Boolean,
      default: true,
    },
    alwaysShow: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      PathPrefix: 'logo/',
    }
  },
  computed: {
    ...mapState(['settingFields']),
  },
  methods: {
    goSysIndex() {
      
      this.$router.push('/')
      // this.getBreadcrumb(tab)
      // 将href存入store的Tage中
      this.$store.commit('Tage', '/')
    },
  },
}
</script>
<style lang="less" scoped>
.logo-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  box-sizing: border-box;

  .logo-img {
    //width: 1.5625rem /* 300/192 */;
    height: 50px;
    vertical-align: middle;
    margin-right: 5px;

    img {
      height: 100%;
      width: 100%;
      object-fit: contain;
    }
  }

  .logo-title {
    color: #ffffff;

    margin-left: 5px;
    font-weight: bold;
    // 强制一行展示
    white-space: nowrap;
    overflow: hidden;
    font-family: 'LiSu' !important;
  }
}
</style>
